<template>
  <div style="width: 100%;height: 100%">
    <div style="height: calc(100vh - 84px)">
      <el-carousel :height="bannerHeight + 'px'" motion-blur>
        <el-carousel-item v-for="(item,index) in formData.imageUrl" :key="index">
          <el-image style="width: 100%; height: 100%" :src="item.url"  />
          <div style="position: absolute;z-index: 100;" v-html="item.bannerText" class="ql-editor"
               :style="{left: item.pingyiweizhi == '左边' ? '5%' : item.pingyiweizhi == '中间' ? '50%' : '90%'},
{top: item.shuipingweizhi == '顶部' ? '40px' : item.shuipingweizhi == '居中' ? '50%' : '90%'}"></div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!--    第一部分-->
    <div style="width: 100%;margin-bottom: 120px">
      <div style="margin:120px 0 40px 0;align-items:center;flex-direction: column" class="fixed-row">
        <h2 style="font-size: 46px;color: #1c1f24">{{formData.title}}</h2>
        <p style="margin-top: 5px;font-size: 16px;color: #666666">About us</p>
        <p style="width: 20px;height: 2px;background: #0d54eb;margin-top: 10px"></p>
      </div>
      <div style="width: 100%;justify-content: center;" class="fixed-row">
        <div style="width: 60%;justify-content: center;align-items: flex-start" class="fixed-row">
          <img :src="formData.weUrl" style="width: 624px;height: 445px">
          <div style="margin-left: 60px" class="ql-editor" v-html="formData.context"></div>
        </div>
      </div>
    </div>

    <div style="width: 100%;height: 50px;background: #353334;color: #fff;line-height:50px;text-align: center;font-size: 14px;">
      Copyright© 2014-2018 All Rights Reserved 版权所有 杭州蓝启 | 京ICP备14045740号-1 | 京公网安备 11011402010147号
    </div>
  </div>
</template>

<script setup lang="ts">
  import {getAboutList} from '~/api/about'
  const formData = reactive({})
  const bannerHeight = ref(0)
  onMounted(()=>{
    getTableDetail()
  })
  async function getTableDetail(){
    const res = await getAboutList()
    console.log(res.data.records[0],'res.data.records[0]')
    Object.assign(formData,{
      ...res.data.records[0]
    })
    formData.imageUrl = JSON.parse(res.data.records[0].imageUrl)
    bannerHeight.value = document.documentElement.clientHeight - 84
  }
</script>

<style scoped>

</style>
